<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.wrapper div:first-child {
			height: 430px
		}
		ul {
			list-style: none;
		}
		ul li {
			float: left;
			padding: 12px 20px;
			margin-right: 5px;
			background-color: #eee;
			color: #555;
		}
		ul li.current {
			background-color: #b50013;
			color: white;
		}
		img {
			display: none;
		}
		img.active {
			display: block;
		}
	</style>	
</head>
<body>
	<div class = "wrapper">
		<div>
			<img src="1.jpg" alt="" class = "active">
			<img src="2.jpg" alt="">
			<img src="3.jpg" alt="">
		</div>
		<div>
			<ul>
				<li class = "current">北极海鸥</li>
				<li>捕蝇草</li>
				<li>雪豹</li>
			</ul>
		</div>
	</div>	
	<script>
		var lis=document.querySelectorAll('li');
		var imgs=document.querySelectorAll('img');
		for (var i = 0; i < lis.length; i++) {
			lis[i].index=i;
			lis[i].onmouseover=function () {
				for (var j = 0; j < lis.length; j++) {
					lis[j].className="";
					imgs[j].className='';
				}
				this.className='current';
				imgs[this.index].className='active';
			}
		}
	</script>
</body>
</html>